<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .box {
            width: 1500px;
            height: 80px;
            background-color: rebeccapurple;
            margin: 0 auto;
        }

        .box ul {
            list-style: none;
            display: flex;
            justify-content: space-between;
        }

        .box ul a {
            text-decoration: none;
            color: black;
        }

        .box ul a:hover {
            color: red;
        }

        .box ul li {

            line-height: 70px;
            /* width: 110px;   */
        }

        .one {
            position: relative;
        }

        .ul {
            width: 300px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            position: absolute;

            visibility: hidden;
            border: 1px solid saddlebrown;
        }

        .one .ul li {
            width: 110px;
        }

        .box .ul a {
            display: inline-block;
            width: 115px;
            height: 50px;
        }

        .ul1 {
            left: -150px;
        }

        .ul2 {
            left: -125px;
        }

        .ul3 {
            left: -125px;
        }

        .ul4 {
            left: -125px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><a href="#">首页</a></li>
            <li class="one"><a href="#">剧集</a>
                <ul class="ul ul1">
                    <li><a href="#">楚乔传 TV版</a></li>
                    <li><a href="#">十里春风不...</a></li>
                    <li><a href="#">镇魂街第一季</a></li>
                    <li><a href="#">我的前半生</a></li>
                    <li><a href="#">醉玲珑</a></li>
                    <li><a href="#">微微一笑很倾城</a></li>
                    <li><a href="#">终极三国2017</a></li>
                    <li><a href="#">龙珠传奇</a></li>
                </ul>
            </li>
            <li class="one"><a href="#">电影</a>
                <ul class="ul ul2">
                    <li><a href="#">楚乔传版1</a></li>
                    <li><a href="#">十里春...1</a></li>
                    <li><a href="#">镇魂街第1</a></li>
                    <li><a href="#">我的前1</a></li>
                    <li><a href="#">醉玲珑1</a></li>
                    <li><a href="#">微微一笑很1</a></li>
                    <li><a href="#">终极三1</a></li>
                    <li><a href="#">龙珠传1</a></li>
                </ul>
            </li>
            <li class="one"><a href="#">综艺</a>
                <ul class="ul ul3">
                    <li><a href="#">楚乔传 TV版</a></li>
                    <li><a href="#">十里春风不...</a></li>
                    <li><a href="#">镇魂街第一季</a></li>
                    <li><a href="#">我的前半生</a></li>
                    <li><a href="#">醉玲珑</a></li>
                    <li><a href="#">微微一笑很倾城</a></li>
                    <li><a href="#">终极三国2017</a></li>
                    <li><a href="#">龙珠传奇</a></li>
                </ul>
            </li>
            <li class="one"><a href="#">音乐</a>
                <ul class="ul ul4">
                    <li><a href="#">楚乔传 TV版</a></li>
                    <li><a href="#">十里春风不...</a></li>
                    <li><a href="#">镇魂街第一季</a></li>
                    <li><a href="#">我的前半生</a></li>
                    <li><a href="#">醉玲珑</a></li>
                    <li><a href="#">微微一笑很倾城</a></li>
                    <li><a href="#">终极三国2017</a></li>
                    <li><a href="#">龙珠传奇</a></li>
                </ul>
            </li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">来风</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">片库</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">记事</a></li>
            <li><a href="#">工艺</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">汽车</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">财经</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">文化</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">搞笑</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">亲子</a></li>
            <li><a href="#">教育</a></li>
            <li><a href="#">游戏</a></li>
            <li><a href="#">更多</a></li>
        </ul>

    </div>
</body>

</html>
<script>
    var ul = document.querySelectorAll(' .ul');
    var one = document.querySelectorAll('.one');
    var a = 0;
    // alert('jiuoh');
    for (var i = 0; i < one.length; i++) {
        one[i].index = i;
        console.log('jiu ji');
        one[i].onmouseover = function () {
            console.log('jiujiu');
            a = this.index;
            for (var j = 0; j < one.length; j++) {
                one[j].style.color = 'black';
                ul[j].style.visibility = 'hidden';
            }
            one[this.index].style.color = 'blue';
            ul[this.index].style.visibility = 'visible';


        }
        one[i].onmouseout = function () {
            one[a].style.color = 'black';
            ul[a].style.visibility = 'hidden';
        }


    }

</script>